<template>
  <div class="headerContent">
    <el-header class="headerBox">
      <div class="logoBox">
        <div class="logoTile">
          <div class="imgBox fl">
            <img :src="logoPng" alt class="logoImg" />
          </div>
          <div class="title fl">
            {{ title }}
          </div>
        </div>
      </div>
      <div class="userBox">
        <div class="menuBox clearfix">
          <div class="menuList fl" @mouseleave="leave">
            <transition name="slide-fade" mode="out-in">
              <ul v-if="hasMore" key="1" class="menuTitle">
                <li
                  class="item fl"
                  v-for="(item, index) of showList"
                  :key="index"
                  @click="changeMenu(item, index)"
                  :class="{ activeItem: $store.state.currentItem == index }"
                >
                  {{ item.name }}
                </li>
              </ul>
              <!-- </transition>
          <transition name="slide-fade"> -->
              <ul v-else-if="!hasMore" key="2" class="menuTitle">
                <li
                  class="item fl"
                  v-for="(item, index) of hideList"
                  :key="index"
                  @click="changeMenu(item, index)"
                  :class="{ activeItem: $store.state.currentItem == index }"
                >
                  {{ item.name }}
                </li>
                <li
                  class="item fl"
                  @mouseenter="enter"
                  v-if="showList.length > 2"
                >
                  <i class="icon iconfont icongengduo"></i>
                </li>
              </ul>
            </transition>
          </div>
          <span class="spanLine"></span>
          <div class="fr frBox">
            <div class="headerTitle clearfix" style="padding: 0px 12px">
              <el-dropdown
                class="fr"
                :hide-on-click="false"
                @visible-change="changeValue($event)"
              >
                <div
                  class="el-dropdown-link"
                  style="height: 64px; position: relative"
                >
                  <div
                    style="display: inline-block; position: absolute; top: 0"
                  >
                    <i
                      class="icon iconfont icontouxiang-qiye iconFont"
                      v-show="loginType == 'QY'"
                    ></i>
                    <i
                      class="icon iconfont icontouxiang-jiancha iconFont"
                      v-show="loginType == 'JC'"
                    ></i>
                    <i
                      class="icon iconfont icontouxiang-xiangmu iconFont"
                      v-show="loginType == 'XM'"
                    ></i>
                    <i
                      class="icon iconfont icontouxiang-zongchengbao iconFont"
                      v-show="loginType == 'FB'"
                    ></i>
                    <i
                      class="icon iconfont icontouxiang-yinhang iconFont"
                      v-show="loginType == 'BANK'"
                    ></i>
                  </div>
                  <div
                    style="
                      display: inline-block;
                      height: 64px;
                      margin-left: 36px;
                      margin-right: 22px;
                    "
                  >
                    <span
                      class="loginName"
                      v-if="loginType != 'XM' && loginType != 'FB'"
                      >{{
                        userName.length > 8
                          ? userName.substring(0, 7) + '...'
                          : userName
                      }}</span
                    >
                    <span class="loginName" v-if="loginType == 'XM'">{{
                      $store.state.projectName.length > 8
                        ? $store.state.projectName.substring(0, 7) + '...'
                        : $store.state.projectName
                    }}</span>
                    <p class="loginName projectName" v-if="loginType == 'FB'">
                      {{
                        $store.state.projectName.length > 8
                          ? $store.state.projectName.substring(0, 7) + '...'
                          : $store.state.projectName
                      }}
                    </p>
                    <p class="loginName companyName" v-if="loginType == 'FB'">
                      {{
                        $store.state.companyName.length > 8
                          ? $store.state.companyName.substring(0, 7) + '...'
                          : $store.state.companyName
                      }}
                    </p>
                  </div>
                  <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                  <i
                    class="icon iconfont iconxiala"
                    style="
                      display: inline-block;
                      position: absolute;
                      top: 0;
                      right: 0;
                    "
                  ></i>
                </div>
                <el-dropdown-menu
                  slot="dropdown"
                  style="width: 202px; padding: 6px 0px"
                >
                  <el-dropdown-item class="dropdownTitle" disabled>
                    <!-- <i class="icon iconfont icon-user"></i> -->
                    <span
                      class="loginName"
                      v-if="loginType != 'XM' && loginType != 'FB'"
                    >
                      <!-- 延边州建设领域根治农民工欠薪智慧服务信息监管平台延边州建设领域根治农民工欠薪智慧服务信息监管平台 -->
                      {{ userName }}&nbsp;
                      <span class="Logo" v-show="userType == 'MONITOR'"
                        >监察</span
                      >
                      <span class="Logo" v-show="userType == 'BANK'">银行</span>
                    </span>
                    <span class="loginName projectName" v-if="loginType == 'XM'"
                      >{{ $store.state.projectName }}&nbsp;<span class="Logo"
                        >项目</span
                      ></span
                    >
                    <span
                      class="loginName companyName"
                      v-if="loginType == 'QY'"
                    >
                      {{ $store.state.companyName
                      }}<span class="Logo">企业</span>
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    divided
                    v-show="
                      userType == 'MONITOR' ||
                      userType == 'COMPANY' ||
                      userType == 'PROJECT_ADMINISTRATOR' ||
                      userType == 'LABOR_ADMINISTRATOR'
                    "
                  >
                    <i class="icon iconfont iconxiazaiAPP"></i>
                    <!-- <span class="icon-span">下载APP</span> -->
                    <!-- 非建 -->
                    <span
                      class="downApp"
                      v-if="isFj == true && userType != 'MONITOR'"
                      @click="downloadAppHeader('gj365_nc')"
                      >下载APP</span
                    >
                    <!-- 建筑 -->
                    <span
                      class="downApp"
                      v-if="isJz == true && userType != 'MONITOR'"
                      @click="downloadAppHeader('gj365_cs')"
                      >下载APP</span
                    >
                    <span
                      class="downApp"
                      v-if="userType == 'MONITOR'"
                      @click="downloadAppHeader('jiancha_online')"
                      >下载APP</span
                    >
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click.native="changePassword('tel')"
                    :divided="userType == 'BANK' ? true : false"
                  >
                    <i class="icon iconfont iconmibaoshoujihao"></i>
                    <span class="icon-span">修改密保手机号</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="changePassword('password')">
                    <i class="icon iconfont iconmima1"></i>
                    <span class="icon-span">修改账号密码</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="toLogDetail">
                    <i class="icon iconfont iconxitonggengxinrizhi"></i>
                    <span class="icon-span">系统更新日志</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="changeColor()">
                    <i class="icon iconfont icongexinghuashezhi"></i>
                    <span>个性化设置</span>
                  </el-dropdown-item>
                  <div v-show="isChangeColor">
                    <el-dropdown-item
                      @click.native="changeSkin('theme_default')"
                      :class="[{ colorChangeShow: isShow }, 'colorChange']"
                    >
                      <div :class="[{ colorItemShow: isShow }, 'colorItem']">
                        <span class="lightColor"></span>
                        <span style="margin-left: 8px">浅色外观(默认)</span>
                        <i
                          :class="[
                            { iconCheckShow: isShow },
                            'el-icon-check',
                            { iconCheck: !isShow },
                          ]"
                        ></i>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native="changeSkin('theme_cold')"
                      :class="[{ colorChangeShow: !isShow }, 'colorChange']"
                    >
                      <div :class="[{ colorItemShow: !isShow }, 'colorItem']">
                        <span class="darkColor"></span>
                        <span style="margin-left: 8px">深色外观</span>
                        <i
                          :class="[
                            { iconCheckShow: !isShow },
                            'el-icon-check',
                            { iconCheck: isShow },
                          ]"
                        ></i>
                      </div>
                    </el-dropdown-item>
                  </div>
                  <el-dropdown-item divided @click.native="loginOut">
                    <i class="el-icon-switch-button redColor"></i>
                    <span class="icon-span">退出</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div
              class="right-menuList"
              style="display: inline-block; float: right; margin-right: 3px"
            >
              <!-- 监察有大屏 -->
              <!-- 全国演示不显示大屏 -->
              <span
                class="item itemIcon"
                v-if="!isYS() && !isCCUser()"
                @click="toDataScreen"
                v-show="userType == 'MONITOR'"
              >
                <i
                  style="font-size: 19px"
                  class="icon iconfont iconshujudaping"
                ></i>
              </span>
              <span
                class="item itemIcon"
                @click="toMessageList"
                :class="{ rightMargin: newsNum > 1 }"
                v-show="!this.isCCUser()"
              >
                <el-badge is-dot class="item newsNum" :hidden="newsNum < 1">
                  <i
                    style="font-size: 19px"
                    class="icon iconfont iconbianzu"
                  ></i>
                </el-badge>
              </span>
              <span
                class="item itemIcon"
                @click="downloadHelp"
                v-show="!this.isCCUser()"
              >
                <i
                  style="font-size: 19px"
                  class="icon iconfont iconshuoming"
                ></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-dialog
      :visible.sync="centerDialogVisible"
      class="downshoulidan"
      width="280px"
      :modal-append-to-body="false"
      :append-to-body="true"
      :showClose="false"
      center
    >
      <div slot="title"></div>
      <div class="generateQRcode" id="generateQRcodeHeader">
        <img :src="qrCode_Url" alt />
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  // props:["newsNum"],
  data() {
    return {
      showRight: false, //是否展示下拉的退出按钮
      centerDialogVisible: false,
      // systemName: "内蒙古和谐劳动用工动态服务平台",
      userName: '',
      isCollapse: false,
      loginType: '', //登录入口类型
      userType: '', //用户类型
      qrCode_Url: '', //二维码
      title: '建设领域根治农民工欠薪智慧服务信息监管平台', //标题
      data: [],
      appList: [], //顶部菜单
      showList: [], //顶部栏显示菜单
      hideList: [], //下拉栏显示菜单
      hasMore: false, //是否有最多按钮显示
      current: -1, //下拉选中
      currentItem: 0, //顶部栏选中
      isFj: false, //是否是非建
      logoPng: this.$store.state.areaInfoArr.mainTopImg,
      isJz: false, //是否是建筑
      isChangeColor: false,
    }
  },
  created() {
    this.userName = this.$store.state.nickName
    this.title = localStorage.getItem('documentTitle')
    // if (this.userName) {
    //   this.userName =
    //     this.userName.length > 25
    //       ? this.userName.substring(0, 25) + "..."
    //       : this.userName;
    // }
    console.log(this.$store.state.userType)
    this.loginType = localStorage.getItem('loginType')

    if (this.$store.state.userType === 'COMPANY') {
      this.loginType = 'QY' //企业
    }
    if (this.$store.state.userType === 'BANK') {
      this.loginType = 'BANK' //银行
    }
    if (
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType == 'LABOR_ADMINISTRATOR'
    ) {
      this.loginType = 'XM' //项目
    }
    if (this.$store.state.userType == 'FENBAO_MANAGER') {
      this.loginType = 'FB' //分包
    }
    if (this.$store.state.userType == 'PROJECT_OWNER') {
      this.loginType = 'PROJECT_OWNER' //分包
    }
    this.userType = this.$store.state.userType
    this.appList = this.$store.state.appList //data
    this.showList = this.$store.state.appList //data
    this.hideList = this.$store.state.appList.slice(0, 2) //data
    if (this.appList[0].code == 'company') {
      this.isFj = true
      this.isJz = false
    } else {
      this.isJz = true
      this.isFj = false
    }
    // this.appList = this.data;
    this.currentItem = this.$store.state.currentItem
      ? this.$store.state.currentItem
      : '0'
    this.current = this.$store.state.currentSelectItem
      ? this.$store.state.currentSelectItem
      : '0'
    //获取消息数据
    this.getNoreadnumber()
  },
  mounted() {
    // this.image = JSON.parse(sessionStorage.getItem("userInf")).image;
    this.clickDocument()
    var that = this
    // that.getWidth();

    // $(window).resize(function () {
    //   that.getWidth();
    // });
  },
  computed: {
    getCollapse() {
      return this.$store.state.collapsed
    },
    isShow() {
      return this.$store.state.isShow
    },
    newsNum() {
      return this.$store.state.newsNum
    },
  },
  methods: {
    toLogDetail() {
      this.$router.push('/home/systemSettings/versionUpdateDetail')
      this.addTab('更新日志', '/home/systemSettings/versionUpdateDetail')
    },
    /**
     * @description: 下拉菜单展开收叠
     */
    changeValue(val) {
      this.isChangeColor = false
    },
    changeColor() {
      this.isChangeColor = !this.isChangeColor
    },
    changeSkin(val) {
      document.body.className = val
      localStorage.setItem('themeColor', val)
      if (val == 'theme_cold') {
        this.$store.commit('changeIsShow', false)
      } else if (val == 'theme_default') {
        this.$store.commit('changeIsShow', true)
      }
    },
    //鼠标移入触发事件
    enter() {
      this.hasMore = true
    },
    //鼠标移出触发事件
    leave() {
      this.hasMore = false
    },
    downloadAppHeader(params) {
      this.centerDialogVisible = true
      event.stopPropagation()
      $('#generateQRcodeHeader').toggle()
      this.getQRcode(params)
    },
    clickDocument() {
      $(document).click(function () {
        $('#generateQRcodeHeader').hide()
      })
    },
    getQRcode(params) {
      this.axios({
        method: 'post',
        url: 'api-bs/upgrade/check',
        data: {
          enName: params,
        },
      })
        .then(
          (response) => {
            this.qrCode_Url = response.data.qrCode_Url
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    showRightEvent() {
      this.showRight = true
    },
    hideRightEvent() {
      this.showRight = false
    },
    //退出
    loginOut() {
      this.$confirm('确认退出吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
      })
        .then(() => {
          this.showRight = false
          this.axios({
            method: 'get',
            url:
              'api-u/sys/logout?Authorization=' +
              localStorage.getItem('access_token'),
          })
            .then(
              (res) => {
                //清除token
                localStorage.setItem('access_token', '')
                localStorage.setItem('refresh_token', '')
                localStorage.setItem('userName', '')
                //清除tab栏数据
                this.$store.state.sliderBar = []
                this.$store.state.keekAlives = []
                localStorage.removeItem('sliderBar')
                localStorage.removeItem('projectEmployee')
                localStorage.removeItem('projectSalary')
                // 顶部栏的选中清空
                this.$store.state.currentItem = ''
                this.$store.state.currentSelectItem = ''
                this.$store.state.investmentOptions = []
                this.$store.state.changeArea = [
                  { areaId: '4228', label: '恩施市' },
                ]
                this.$router.replace('/login/loginFirst')
              },
              (res) => {
                localStorage.setItem('access_token', '')
                localStorage.setItem('refresh_token', '')
                localStorage.setItem('userName', '')
                //清除tab栏数据
                // this.$store.state.sliderBar = [];
                // localStorage.removeItem('sliderBar');
                this.$router.replace('/login/loginFirst')
              }
            )
            .catch((error) => {})
        })
        .catch(() => {})
    },
    //修改密保
    changePassword(type) {
      this.showRight = false
      this.$router.push({
        path: '/home/enterpriseSet/setPassword',
        name: 'setPassword',
        query: {
          type: type,
        },
      })
      this.addTab('账号设置', '/home/enterpriseSet/setPassword')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseSet/setPassword',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getNum() {
      this.axios({
        method: 'post',
        url: 'api-gov/assess/expand/assessstat',
        data: {},
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$store.state.selfEvaluateNumber =
              response.data.result.selfEvaluateNumber
            this.$store.state.assessEvaluateNumber =
              response.data.result.assessEvaluateNumber
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    changeMenu(item, index, type) {
      //判断首页选中code
      this.$store.state.judgeItemCode = item.code
      localStorage.setItem('judgeRoleCode', item.code)
      if (item.appName === '政务考核') {
        this.getNum()
      }
      //点击菜单修改父组件的值
      this.$emit('updateCollapse', false)
      if (type) {
        this.current = index
        this.currentItem = -1
        this.$store.state.currentSelectItem = index
        this.$store.state.currentItem = '-1'
      } else {
        this.current = -1
        this.currentItem = index
        this.$store.state.currentItem = index
        this.$store.state.currentSelectItem = '-1'
      }

      //设置左侧菜单
      // if(item.appName == "系统设置"){
      //   window.open(item.appUrl,"_blank");
      //   return;
      // }
      this.$store.state.menuList = []
      this.$store.state.menuList = item.menuList
      // this.$store.state.menuList = this.data;
      //清除tab栏数据
      this.$store.state.sliderBar = []
      //默认选中
      if (item.menuList[0].child) {
        this.$router.push(item.menuList[0].child[0].url)
        this.$store.state.activeMenu = item.menuList[0].child[0].url
        //tab栏选中
        this.$store.state.sliderBar = [item.menuList[0].child[0]]
        this.$store.state.activeIndex = item.menuList[0].child[0].url
      } else {
        //code 非建领域(company)   建设业主(owner)   总承包施工企业(project)
        if (this.$store.state.userType === 'COMPANY') {
          if (item.code == 'company') {
            // console.log("企业首页")
            this.isFj = true
            this.isJz = false
            localStorage.setItem('urlName', 'companyHome')
          } else if (item.code == 'owner') {
            this.isJz = true
            this.isFj = false
            localStorage.setItem('urlName', 'constructCompanyHomeJS')
          } else if (item.code == 'project' || item.code == 'constructor') {
            this.isJz = true
            this.isFj = false
            localStorage.setItem('urlName', 'constructCompanyHome')
          }
        } else if (
          this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
          this.$store.state.userType == 'LABOR_ADMINISTRATOR'
        ) {
          localStorage.setItem('urlName', 'projectHome')
        } else if (this.$store.state.userType == 'FENBAO_MANAGER') {
          localStorage.setItem('urlName', 'subcontractHome')
        } else {
          if (item.code == 'company') {
            localStorage.setItem('urlName', 'monitorHome')
          } else if (item.code == 'project') {
            if (this.isYS()) {
              localStorage.setItem('urlName', 'index')
            } else if (this.isCzUser()) {
              this.$store.state.sliderBar = [
                {
                  id: '/home',
                  name: '首页',
                  parentId: '0',
                  url: '/home',
                },
              ]
            } else {
              localStorage.setItem('urlName', 'constructMonitorHome')
            }
          }
        }
        this.$router.push(item.menuList[0].url)
        this.$store.state.activeMenu = item.menuList[0].url
        //tab栏选中
        localStorage.removeItem('sliderBar')
      }
    },
    changeMoreMenu(item, index) {
      // this.current = index;
      // this.currentItem = -1;
      // this.$store.state.currentSelectItem = index;
      // this.$store.state.currentItem = "-1";
      //   this.$store.state.menuList = [];
      // this.$store.state.menuList = item.menuList;
      this.changeMenu(item, index, 'more')
    },
    toMessageList() {
      this.$router.push({
        path: '/home/notificationCenter/messageList',
        name: 'messageList',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/notificationCenter/messageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    downloadHelp() {
      this.$router.push({
        path: '/home/help/helpViewer',
        name: 'helpViewer',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/help/helpViewer',
        newUrl: this.$router.currentRoute.fullPath,
      })
      // this.$message.warning('功能开发中，敬请期待');
      // window.open("http://139.129.202.71:8081/hjgw/hjgweditmain/showphoto?key=0b014ac760b51d810160b51e171f0000","_blank");
    },
    toDataScreen() {
      // window.open("http://139.129.202.71:8081/hjgw/hjgweditmain/showphoto?key=0b014ac760b51d810160b51e171f0000","_blank");
      //   this.$router.push("/emptyFile/commandCenter");
      //恩施跳新的数据大屏
      // if(this.isEsUser() || this.isCCUser()) {
      this.$router.push('/home/chart/index')
      this.addTab('数据大屏', '/home/chart/index')
      // } else {
      //     this.$router.push("/emptyFile/commandCenter");
      // }
    },
    addTab(name, url) {
      if (name) {
        this.$store.state.activeMenuName = name
        // delete menu.newName;
        this.$store.state.activeMenu = url
        this.$store.commit('ADD_SLIDER', { name: name, url: url })
      }
    },
    getNoreadnumber() {
      this.axios({
        method: 'post',
        url: 'api-i/infocenter/expand/searchinfocount',
        data: { isRead: '0' },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.$store.state.newsNum = resp.data.result
          } else {
            //   console.log(resp.data.errorMsg);
          }
        })
        .catch((resp) => {
          // this.$message.error("数据获取失败");
        })
    },
  },
}
</script>
<style scoped lang="less">
/* 顶部 */
.redColor {
  color: #fb0707;
}
.el-header {
  height: 64px !important;
  background-color: #009588;
  line-height: 62px;
  // padding:0px 8px;
  padding: 0;
  color: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  font-size: 14px;
  // overflow: hidden;
  .companyName {
    cursor: pointer;
  }
  .headerLeft {
    display: inline-block;
  }
  .headerRight {
    position: absolute;
    z-index: 10000;
    right: 0;
    color: #222;
    width: 130px;
    padding: 15px;
    line-height: 35px;
    background-color: #cfe2e1;
    .itemLine {
      cursor: pointer;
    }
    .itemLine:hover {
      color: #009588;
    }
  }
  .systemName {
    font-size: 22px;
    color: #fff;
    line-height: 64px;
    margin-left: 15px;
    display: inline-block;
  }
  .openShow {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    width: 230px;
    background-color: #009588;
    padding: 0 15px;
    img {
      display: inline;
      vertical-align: middle;
    }
  }
  .logo-collapse-width {
    width: 56px;
  }
  .logo-width {
    width: 230px;
  }
  .foldShow {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    width: 56px;
    background-color: #141f2a;
    padding: 0 15px;
  }
  .fr {
    text-align: right;
    padding: 0 15px;
    font-size: 14px;
  }
  .iconFont {
    vertical-align: middle;
    font-size: 28px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
    // padding-left: 8px;
    .loginName {
      height: 32px;
      text-align: left;
      width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .projectName {
      line-height: 42px;
    }
    .companyName {
      line-height: 22px;
    }
    .iconxiala {
      font-size: 14px;
    }
  }
  .DownAppWrap {
    display: inline-block;
    padding-right: 30px;
    position: relative;
  }
}
.menuList {
  padding-left: 19px;
  text-align: center;
  .menuTitle {
    margin-right: 8px;
    text-align: center;
    .item {
      width: 112px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 18px;
      cursor: pointer;
    }
    .item:hover {
      background-color: #2b74c9;
    }
  }
}
.menuList span {
  padding: 10px 20px 10px 24px;
  margin-left: 3px;
  cursor: pointer;
  border-radius: 18px;
  line-height: 64px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  font-weight: 500;
}
.right-menuList span {
  // margin-left: 10px;
  cursor: pointer;
  i {
    // margin-right: 7px;
  }
}

.dropdownCon {
  color: #fff;
  font-size: 16px;
}

.dropdownList {
  // max-width: 260px;
  width: 260px;
  .item {
    color: #333;
    // margin:0 10px;
    padding: 5px 10px;
    width: 120px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    i {
      margin-right: 7px;
    }
  }
  .active {
    color: #409eff;
  }
}

.activeItem {
  background: #00ae9f;
}

.rightMargin {
  margin-right: 0px;
}

.newsNum {
  vertical-align: baseline;
  display: inline;
  /deep/ .el-badge__content {
    line-height: 15px;
    border: 1px solid #f56c6c;
    font-size: 14px;
  }
  /deep/ .el-badge__content.is-dot {
    width: 9px;
    height: 9px;
  }
  .red {
    color: #f56c6c;
  }
}
.Logo {
  display: inline-block;
  width: 33px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #d6e7fb;
  font-family: SourceHanSansCN-Medium;
  font-size: 11px;
  color: #409eff;
  font-weight: 500;
  border-radius: 2px;
}
.logoBox {
  height: 64px;
  .logoTile {
    height: 64px;
    text-align: center;
    line-height: 64px;
    position: fixed;
    .imgBox {
      display: inline-block;
      width: 60px;
      height: 64px;
      padding: 0px 10px;
      line-height: 64px;
      position: relative;
      .logoImg {
        width: 35.74px;
        height: 40px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    }
    div {
      font-size: 20px;
      color: #fff;
    }

    .title {
      font-family: SourceHanSansCN-Medium;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 1px;
      font-weight: 500;
      white-space: nowrap;
    }
  }
}
.userBox {
  height: 64px;
  z-index: 9999;
  background-color: #265faa;
  position: absolute;
  right: 0px;
  top: 0px;
  .menuBox {
    width: 100%;
    height: 100%;
    .menuTitle {
      width: 100%;
      height: 64px;
      line-height: 64px;
      .item {
        margin-top: 14px;
      }
    }
  }
}
.spanLine {
  display: inline-block;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  margin: 12px 0px 0px 13px;
}
.dropdownTitle {
  line-height: 20px;
}
.headerTitle {
  display: inline-block;
  float: right;
  padding: 0px !important;
}
.headerTitle :hover {
  background-color: #225598;
}
// /deep/ .el-dropdown-link.el-dropdown-selfdefine{
//     padding:0px 10px;
// }
.itemIcon {
  display: inline-block;
  width: 48px;
  height: 100%;
  text-align: center;
}
.itemIcon:hover {
  background-color: #225598;
}
.menuList span:hover {
  background-color: #2b74c9;
}
/deep/ .el-dropdown-menu__item.is-disabled {
  color: #333;
}
/deep/.popper__arrow {
  top: 0px;
}
.fr.frBox {
  padding: 0px 15px 0px 8px;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.downApp {
  display: inline-block;
  width: calc(100% - 40px);
  height: 100%;
  cursor: pointer;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    right: 0;
    width: 2px;
    height: 38px;
    // background: #3cb0a5;
    pointer-events: none;
  }
}
.personalization {
  display: inline-block;
  width: calc(100% - 10px);
  height: 100%;
  cursor: pointer;
}
.generateQRcode {
  position: absolute;
  background: #fff;
  // width: 180px;
  // padding: 18px 32px;
  text-align: center;
  z-index: 9999;
  line-height: 0;
  p {
    margin-top: 18px;
    color: #666;
    font-size: 14px;
  }
  img {
    width: 280px;
    height: 280px;
  }
}
.lightColor {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #e9e9e9;
}
.darkColor {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #37566c;
}
/deep/ .el-dropdown-menu__item:before:focus {
  content: '\e61e';
  font-size: 12px;
}
.downshoulidan {
  /deep/ .el-dialog__header {
    padding: 0 !important;
    border-bottom: 0px;
  }
}
/deep/ .el-dialog__body {
  height: 280px;
  padding: 0px 0px 0px;
  overflow: auto;
}
/deep/.el-dialog--center .el-dialog__body {
  padding: 0px 0px 0px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.colorChange {
  width: 194px;
  height: 20px;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 3px;
  line-height: 20px;
  background: #fff !important;
}
.colorChange:focus {
  background: #f5f5f5 !important;
  color: #666666;
}
.colorChange:focus .iconCheck {
  display: block;
}
.iconCheck {
  float: right;
  margin-top: 5px;
  display: none;
}
.colorItem {
  width: 168px;
  line-height: 25px;
  margin-top: 5px;
}
.colorItemShow {
  width: 168px;
  line-height: 25px;
  margin-top: 5px;
}
.colorChangeShow {
  background: #f5f5f5 !important;
  color: #666666;
}
.iconCheckShow {
  float: right;
  margin-top: 5px;
}
</style>
